<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<style>
table{
border-collapse: collapse;
}

thead>tr{
border-bottom:2px solid #B7D1FB ;
}

tbody>tr{
border-bottom:1px solid #B7D1FB; 
}

th,
td{
padding: 12px;
}

a{
text-decoration: none;
}
</style>

</head>
<body>
<table>
<thead>
<tr>
<th>
<input type="checkbox"  id="allab" onclick="SelectAll()"/>
<label for="allcb">全选</label>
</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<!-- 这里空了 -->
<tr>
<!-- <td id="order" colspan="6" style="text-align: right;">
<span>已经选择16件商品总计</span>
<span style="color: red; font-size: 22px;">731.40</span>
<a href="#" style="border-radius: 4px;
padding:8px;
background:#F08B34;color:#fff">提交订单</a>
</td> -->
</tr> 

</table>

<script>
var data=[{
// id:0,
// choose:false;//选中和未被选中 重复性

name:'javaScript实战',
price:40,
num:1
},
{
name:'javaScript实战2代',
price:42,
num:2
},
{
name:'javaScript实战3代',
price:43,
num:3
},
];

var tdbody=document.querySelector('table').lastElementChild;
//处理数据
function dealData(){
//<object.assign 多个对象合并
// data.forEach()
// data.map((x,i)=>Object.assign(x,{id:i,choose:false}))
data.map((x,i)=>Object.assign(x,{id:i,choose:true}))
// console.log(data);

}dealData();
function init(){
//这里删除无问题 但总计没了 加了tr后就有了
tdbody.innerHTML=`
<tr>
<td id="order" colspan="6" style="text-align: right;">
<span>已经选择16件商品总计</span>
<span style="color: red; font-size: 22px;">731.40</span>
<a href="#" style="border-radius: 4px;
padding:8px;
background:#F08B34;color:#fff">提交订单</a>
</td>
</tr>
`;

data.forEach(o=>appendGood(o));
refreshCash();//刷新金额
}init();

function delGood(i){//删除
//filter过滤方法 0和 2 3 符合条件 1不行
data=data.filter(o=>o.id!=i)
init();

// console.log(data);

}
function plus(i){
// data.forEach(o=>o.id==i ? o.num++:false)
data.forEach(o=>o.id==i ? o.num++:'')
init();

// console.log(i);
// // data.forEach(o=>{
// // 	if(o.id==i){
// // 		o.num++;
// // 	}
// // })
// // init();
}

function minus(i){
data.forEach(o=>o.id==i&&o.num>0 ? o.num--:false)//必须大于0 不能等于0
init();
// console.log(i);
//map map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

// //reduce  reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
// 接受四个参数：初始值（或者上一次回调函数的返回值），
// 当前元素值，当前索引，调用 reduce 的数组。

//forEach  定义和用法forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
// 注意:forEach() 对于空数组是不会执行回调函数的。

//filter filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
// 注意: filter() 不会对空数组进行检测。注意: filter() 不会改变原始数组

}
function refreshCash(){
	var td=document.querySelector('#order');
	var newData=data.filter(o=>o.choose);//过滤后的data 接住 再计算总值
	var totalNum=newData.reduce((t,c)=>t+c.num,0);
	var totalPrice=newData.reduce((t,c)=>t+c.num*c.price,0).toFixed(2);
	td.firstElementChild.innerHTML=`已经选择${totalNum}件商品`;
	td.firstElementChild.nextElementSibling.innerHTML=totalPrice;
	
	// // console.log(td);
	// //总数 reduce元素便利，加在总里面？
	// var totalNum=data.reduce((t,c)=>t+c.num);
	// console.log(totalNum);
	
}refreshCash();








// var tdbody=document.querySelector('table').lastElementChild;
// console.log(tdbody)
// console.log(tdbody.childNodes)

function appendGood(Obj){
var tr=document.createElement('tr');

var sum=(Obj.num*Obj.price).toFixed(2);//保留2位小数
tr.innerHTML=`
<td>
<input onclick="choose()" type="checkbox" name="c"/>
</td>

<td>${Obj.name}</td>
<td>${Obj.price}</td>

<td>
<button onclick="minus(${Obj.id})">-</button>
<span>${Obj.num}</span>
<button onclick="plus(${Obj.id})">+</button>
</td>

<td style="color: red;">${sum}</td>
<td>
<a href="#" onclick="delGood(${Obj.id})">删除</a>
</td>
`;
tdbody.insertBefore(tr,tdbody.lastElementChild);
// console.log(tr);
// }appendGood(data[1]);
};
//forEach（） 循环 每个都自己跑一遍 
// data.forEach(o=>appendGood(o));

</script>
</body>
</html>